JavaScript μ΄λ²€νΈ μμμ κ°λ ₯ν κΈ°λ₯μ νμ©νμ¬ μΉ μ ν리μΌμ΄μ μ±λ₯μ ν₯μμν€κ³ λ©λͺ¨λ¦¬ μ¬μ©λμ μ΅μννμΈμ. λͺ¨λ² μ¬λ‘, ꡬν μ λ΅ λ° μ€μ μμ λ₯Ό μμ보μΈμ.
JavaScript μ΄λ²€νΈ μμ: μ±λ₯ λ° λ©λͺ¨λ¦¬ ν¨μ¨μ± μ΅μ ν
νλ μΉ κ°λ°μμ μ±λ₯ λ° λ©λͺ¨λ¦¬ κ΄λ¦¬λ λ§€μ° μ€μν©λλ€. μ ν리μΌμ΄μ μ 볡μ‘μ±μ΄ μ¦κ°ν¨μ λ°λΌ ν¨μ¨μ μΈ μ΄λ²€νΈ μ²λ¦¬κ° μ€μν΄μ§λλ€. JavaScript μ΄λ²€νΈ μμμ μΉ μ ν리μΌμ΄μ μ μ±λ₯κ³Ό λ©λͺ¨λ¦¬ 곡κ°μ ν¬κ² ν₯μμν¬ μ μλ κ°λ ₯ν κΈ°μ μ λλ€. μ΄ ν¬κ΄μ μΈ κ°μ΄λμμλ μ΄λ²€νΈ μμμ μ리, μ΄μ , ꡬν λ° λͺ¨λ² μ¬λ‘λ₯Ό μ΄ν΄λ΄ λλ€.
μ΄λ²€νΈ μμ μ΄ν΄
μ΄λ²€νΈ μμμ DOM(Document Object Model)μ μ΄λ²€νΈ λ²λΈλ§ λ©μ»€λμ¦μ νμ©ν©λλ€. μμμμ μ΄λ²€νΈκ° λ°μνλ©΄ λ¨Όμ ν΄λΉ νΉμ μμμ μ°κ²°λ μ΄λ²€νΈ νΈλ€λ¬λ₯Ό νΈλ¦¬κ±°ν©λλ€. κ·Έλ° λ€μ μ΄λ²€νΈκ° λͺ
μμ μΌλ‘ μ€μ§λμ§ μμΌλ©΄(event.stopPropagation() μ¬μ©) DOM νΈλ¦¬λ₯Ό "λ²λΈλ§"νμ¬ μμ μμμ μ΄λ²€νΈ νΈλ€λ¬λ₯Ό νΈλ¦¬κ±°νκ³ λ¬Έμμ 루νΈμ λλ¬νκ±°λ μ΄λ²€νΈ νΈλ€λ¬κ° μ νλ₯Ό μ€μ§ν λκΉμ§ κ³μλ©λλ€.
κ°λ³ μμ μμμ μ΄λ²€νΈ 리μ€λλ₯Ό μ°κ²°νλ λμ μ΄λ²€νΈ μμμ λ¨μΌ μ΄λ²€νΈ 리μ€λλ₯Ό μμ μμμ μ°κ²°νλ κ²μ ν¬ν¨ν©λλ€. κ·Έλ° λ€μ μ΄ λ¦¬μ€λλ μ΄λ²€νΈμ target μμ±(event.target)μ κ²μ¬ν©λλ€. μ΄ μμ±μ μλ μ΄λ²€νΈλ₯Ό νΈλ¦¬κ±°ν μμλ₯Ό λνλ
λλ€. targetμ κ²μ¬νμ¬ λ¦¬μ€λλ μ΄λ²€νΈκ° νΉμ κ΄μ¬ μμ μμμμ λ°μνλμ§ μ¬λΆλ₯Ό νμΈνκ³ μ μ ν μμ
μ μ€νν μ μμ΅λλ€.
κΈ°μ‘΄ λ°©μ: κ°λ³ μμμ 리μ€λ μ°κ²°
μ΄λ²€νΈ μμμ μ΄ν΄λ³΄κΈ° μ μ μ΄λ²€νΈ 리μ€λλ₯Ό κ°λ³ μμμ μ§μ μ°κ²°νλ κΈ°μ‘΄ λ°©μμ μ΄ν΄λ³΄κ² μ΅λλ€. νλͺ© λͺ©λ‘μ΄ μκ³ κ° νλͺ©μ λν ν΄λ¦μ μ²λ¦¬νλ €λ μλ리μ€λ₯Ό κ³ λ €νμμμ€.
const listItems = document.querySelectorAll('li');
listItems.forEach(item => {
item.addEventListener('click', function(event) {
console.log('Item clicked:', event.target.textContent);
});
});
μ΄ μ½λλ κ° li μμλ₯Ό λ°λ³΅νκ³ λ³λμ μ΄λ²€νΈ 리μ€λλ₯Ό μ°κ²°ν©λλ€. μ΄ λ°©λ²μ μλνμ§λ§ νΉν λ§μ μμ μμ λλ λμ μΌλ‘ μΆκ°λ μμλ₯Ό μ²λ¦¬ν λ λͺ κ°μ§ λ¨μ μ΄ μμ΅λλ€.
μ΄λ²€νΈ μμ λ°©μ: λμ± ν¨μ¨μ μΈ μ루μ
μ΄λ²€νΈ μμμ μ¬μ©νλ©΄ λ¨μΌ μ΄λ²€νΈ 리μ€λλ₯Ό μμ ul μμμ μ°κ²°ν©λλ€.
const list = document.querySelector('ul');
list.addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
console.log('Item clicked:', event.target.textContent);
}
});
μ΄ μμ μμ μ΄λ²€νΈ 리μ€λλ ul μμμ μ°κ²°λ©λλ€. ν΄λ¦ μ΄λ²€νΈκ° li μμ(λλ ul λ΄μ λ€λ₯Έ μμ)μμ λ°μνλ©΄ μ΄λ²€νΈλ ulλ‘ λ²λΈλ§λ©λλ€. κ·Έλ° λ€μ μ΄λ²€νΈ 리μ€λλ event.targetμ΄ LI μμμΈμ§ νμΈν©λλ€. κ·Έλ λ€λ©΄ μ½λλ μνλ μμ
μ μ€νν©λλ€.
μ΄λ²€νΈ μμμ μ΄μ
μ΄λ²€νΈ μμμ κ°λ³ μμμ μ΄λ²€νΈ 리μ€λλ₯Ό μ°κ²°νλ κΈ°μ‘΄ λ°©μλ³΄λ€ λͺ κ°μ§ μ€μν μ΄μ μ μ 곡ν©λλ€.
- ν₯μλ μ±λ₯: DOMμ μ°κ²°λ μ΄λ²€νΈ 리μ€λμ μλ₯Ό μ€μ¬ νΉν λ§μ μμ μμλ₯Ό μ²λ¦¬ν λ λ λμ μ±λ₯μ μ 곡ν©λλ€.
- κ°μλ λ©λͺ¨λ¦¬ μλΉ: μ΄λ²€νΈ 리μ€λκ° μ μΌλ©΄ λ©λͺ¨λ¦¬ μ¬μ©λμ΄ μ€μ΄λ€μ΄ μ ν리μΌμ΄μ μ΄ λμ± ν¨μ¨μ μΌλ‘ μλν©λλ€.
- κ°μνλ μ½λ: μ΄λ²€νΈ μ²λ¦¬ λ‘μ§μ μ€μ μ§μ€ννμ¬ μ½λλ₯Ό λ κΉλνκ³ μ μ§ κ΄λ¦¬νκΈ° μ½κ² λ§λλλ€.
- λμ μΌλ‘ μΆκ°λ μμ μ²λ¦¬: μ΄λ²€νΈ 리μ€λκ° μ°κ²°λ ν DOMμ μΆκ°λ μμμ λν΄ μλμΌλ‘ μλνλ©° μ μμμ 리μ€λλ₯Ό μ°κ²°νκΈ° μν μΆκ° μ½λκ° νμνμ§ μμ΅λλ€.
μ±λ₯ ν₯μ: μ λμ κ΄μ
μ΄λ²€νΈ μμμΌλ‘ μΈν μ±λ₯ ν₯μμ νΉν μλ°± λλ μμ² κ°μ μμλ₯Ό μ²λ¦¬ν λ μλΉν μ μμ΅λλ€. κ° κ°λ³ μμμ μ΄λ²€νΈ 리μ€λλ₯Ό μ°κ²°νλ©΄ λ©λͺ¨λ¦¬μ μ²λ¦¬ λ₯λ ₯μ΄ μλͺ¨λ©λλ€. λΈλΌμ°μ λ κ° λ¦¬μ€λλ₯Ό μΆμ νκ³ ν΄λΉ μμμμ ν΄λΉ μ΄λ²€νΈκ° λ°μν λλ§λ€ μ°κ²°λ μ½λ°± ν¨μλ₯Ό νΈμΆν΄μΌ ν©λλ€. νΉν ꡬν μ₯μΉλ 리μμ€κ° μ νλ νκ²½μμλ λ³λͺ© νμμ΄ λ μ μμ΅λλ€.
μ΄λ²€νΈ μμμ μμ μμμ λ¨μΌ 리μ€λλ₯Ό μ°κ²°νμ¬ μ€λ²ν€λλ₯Ό ν¬κ² μ€μ
λλ€. λΈλΌμ°μ λ μμ μμμ μμ κ΄κ³μμ΄ νλμ 리μ€λλ§ κ΄λ¦¬νλ©΄ λ©λλ€. μ΄λ²€νΈκ° λ°μνλ©΄ λΈλΌμ°μ λ λ¨μΌ μ½λ°± ν¨μλ§ νΈμΆνλ©΄ λλ©°, μ΄ ν¨μλ event.targetμ κΈ°λ°μΌλ‘ μ μ ν μμ
μ κ²°μ ν©λλ€.
λ©λͺ¨λ¦¬ ν¨μ¨μ±: λ©λͺ¨λ¦¬ κ³΅κ° μ΅μν
κ° μ΄λ²€νΈ 리μ€λλ λ©λͺ¨λ¦¬λ₯Ό μλΉν©λλ€. μλ§μ 리μ€λλ₯Ό κ°λ³ μμμ μ°κ²°νλ©΄ μ ν리μΌμ΄μ μ λ©λͺ¨λ¦¬ 곡κ°μ΄ ν¬κ² μ¦κ°ν μ μμ΅λλ€. μ΄λ‘ μΈν΄ νΉν λ©λͺ¨λ¦¬κ° μ νλ μ₯μΉμμ μ±λ₯ μ νκ° λ°μν μ μμ΅λλ€.
μ΄λ²€νΈ μμμ μ΄λ²€νΈ 리μ€λμ μλ₯Ό μ€μ¬ λ©λͺ¨λ¦¬ μλΉλ₯Ό μ΅μνν©λλ€. μ΄λ SPA(λ¨μΌ νμ΄μ§ μ ν리μΌμ΄μ ) λ° λ©λͺ¨λ¦¬ κ΄λ¦¬κ° μ€μν κΈ°ν 볡μ‘ν μΉ μ ν리μΌμ΄μ μμ νΉν μ μ©ν©λλ€.
μ΄λ²€νΈ μμ ꡬν: μ€μ μμ
μ΄λ²€νΈ μμμ ν¨κ³Όμ μΌλ‘ μ μ©ν μ μλ λ€μν μλ리μ€λ₯Ό μ΄ν΄λ³΄κ² μ΅λλ€.
μμ 1: λμ λͺ©λ‘μμ ν΄λ¦ μ²λ¦¬
λμ μΌλ‘ μΆκ°νκ±°λ μ κ±°ν μ μλ μμ λͺ©λ‘μ΄ μλ€κ³ κ°μ ν΄ λ³΄κ² μ΅λλ€. μ΄λ²€νΈ μμμ μ¬μ©νλ©΄ νμ΄μ§κ° λ‘λλ νμ μΆκ°λ κ²½μ°μλ μ΄λ¬ν μμ μ λν ν΄λ¦μ μ½κ² μ²λ¦¬ν μ μμ΅λλ€.
<ul id="taskList">
<li>Task 1</li>
<li>Task 2</li>
<li>Task 3</li>
</ul>
<button id="addTask">Add Task</button>
const taskList = document.getElementById('taskList');
const addTaskButton = document.getElementById('addTask');
taskList.addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
event.target.classList.toggle('completed');
}
});
addTaskButton.addEventListener('click', function() {
const newTask = document.createElement('li');
newTask.textContent = 'New Task';
taskList.appendChild(newTask);
});
μ΄ μμ μμ μμ μ ν΄λ¦νλ©΄ 'completed' ν΄λμ€κ° ν κΈλ©λλ€. μ΄λ²€νΈ μμ λλΆμ μ μμ μ μΆκ°νλ©΄ κΈ°μ‘΄ μ΄λ²€νΈ 리μ€λμ μλμΌλ‘ μλν©λλ€.
μμ 2: ν μ΄λΈμμ μ΄λ²€νΈ μ²λ¦¬
ν μ΄λΈμλ μ’ μ’ μλ§μ νκ³Ό μ μ΄ ν¬ν¨λμ΄ μμ΅λλ€. κ° μ μ μ΄λ²€νΈ 리μ€λλ₯Ό μ°κ²°νλ©΄ λΉν¨μ¨μ μΌ μ μμ΅λλ€. μ΄λ²€νΈ μμμ λμ± νμ₯ κ°λ₯ν μ루μ μ μ 곡ν©λλ€.
<table id="dataTable">
<thead>
<tr><th>Name</th><th>Age</th><th>Country</th></tr>
</thead>
<tbody>
<tr><td>Alice</td><td>30</td><td>USA</td></tr>
<tr><td>Bob</td><td>25</td><td>Canada</td></tr>
<tr><td>Charlie</td><td>35</td><td>UK</td></tr>
</tbody>
</table>
const dataTable = document.getElementById('dataTable');
dataTable.addEventListener('click', function(event) {
if (event.target.tagName === 'TD') {
console.log('Cell clicked:', event.target.textContent);
// You can access the row using event.target.parentNode
const row = event.target.parentNode;
const name = row.cells[0].textContent;
const age = row.cells[1].textContent;
const country = row.cells[2].textContent;
console.log(`Name: ${name}, Age: ${age}, Country: ${country}`);
}
});
μ΄ μμ μμ μ
μ ν΄λ¦νλ©΄ ν΄λΉ μ½ν
μΈ μ ν΄λΉ ν λ°μ΄ν°κ° κΈ°λ‘λ©λλ€. μ΄ λ°©λ²μ κ° TD μμμ κ°λ³ ν΄λ¦ 리μ€λλ₯Ό μ°κ²°νλ κ²λ³΄λ€ ν¨μ¬ ν¨μ¨μ μ
λλ€.
μμ 3: νμ λ©λ΄ ꡬν
μ΄λ²€νΈ μμμ μ¬μ©νμ¬ νμ λ©λ΄ νλͺ©μ λν ν΄λ¦μ ν¨μ¨μ μΌλ‘ μ²λ¦¬ν μ μμ΅λλ€.
<nav>
<ul id="mainNav">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
const mainNav = document.getElementById('mainNav');
mainNav.addEventListener('click', function(event) {
if (event.target.tagName === 'A') {
event.preventDefault(); // Prevent default link behavior
const href = event.target.getAttribute('href');
console.log('Navigating to:', href);
// Implement your navigation logic here
}
});
μ΄ μμ μμλ μ΄λ²€νΈ μμμ μ¬μ©νμ¬ νμ λ§ν¬μ λν ν΄λ¦μ μ²λ¦¬νλ λ°©λ²μ 보μ¬μ€λλ€. κΈ°λ³Έ λ§ν¬ λμμ λ°©μ§νκ³ λμ URLμ κΈ°λ‘ν©λλ€. κ·Έλ° λ€μ λ¨μΌ νμ΄μ§ μ ν리μΌμ΄μ μ μ½ν μΈ λ₯Ό μ λ°μ΄νΈνλ λ± μ¬μ©μ μ§μ νμ λ‘μ§μ ꡬνν μ μμ΅λλ€.
μ΄λ²€νΈ μμμ λν λͺ¨λ² μ¬λ‘
μ΄λ²€νΈ μμμ μ΄μ μ κ·Ήλννλ €λ©΄ λ€μ λͺ¨λ² μ¬λ‘λ₯Ό λ°λ₯΄μμμ€.
- νΉμ μμ νκ²ν
: μ΄λ²€νΈ 리μ€λκ°
event.targetμμ±μ νμΈνμ¬ μ²λ¦¬νλ €λ νΉμ μμλ₯Ό μλ³νλμ§ νμΈν©λλ€. μμ 컨ν μ΄λ λ΄μ λ€λ₯Έ μμμμ λ°μνλ μ΄λ²€νΈμ λν΄ λΆνμν μ½λλ₯Ό μ€ννμ§ λ§μμμ€. - CSS ν΄λμ€ λλ λ°μ΄ν° μμ± μ¬μ©: CSS ν΄λμ€ λλ λ°μ΄ν° μμ±μ μ¬μ©νμ¬ κ΄μ¬ μλ μμλ₯Ό μλ³ν©λλ€. μ΄λ κ² νλ©΄ μ½λλ₯Ό λ μ½κΈ° μ½κ³ μ μ§ κ΄λ¦¬νκΈ° μ½κ² λ§λ€ μ μμ΅λλ€. μλ₯Ό λ€μ΄ μ²λ¦¬νλ €λ μμμ
'clickable-item'ν΄λμ€λ₯Ό μΆκ°ν λ€μ μ΄λ²€νΈ 리μ€λμμ ν΄λΉ ν΄λμ€λ₯Ό νμΈν μ μμ΅λλ€. - μ§λμΉκ² κ΄λ²μν μ΄λ²€νΈ 리μ€λ λ°©μ§: μ΄λ²€νΈ 리μ€λλ₯Ό μ°κ²°νλ μμΉμ μ£Όμνμμμ€.
documentλλbodyμ μ°κ²°νλ©΄ λ§μ μμ μ΄λ²€νΈμ λν΄ μ΄λ²€νΈ νΈλ€λ¬κ° λΆνμνκ² μ€νλλ κ²½μ° μ±λ₯μ΄ μ νλ μ μμ΅λλ€. μ²λ¦¬νλ €λ λͺ¨λ μμκ° ν¬ν¨λ κ°μ₯ κ°κΉμ΄ μμ μμλ₯Ό μ ννμμμ€. - μ΄λ²€νΈ μ ν κ³ λ €: μ΄λ²€νΈ λ²λΈλ§μ΄ μλνλ λ°©μκ³Ό
event.stopPropagation()μ μ¬μ©νμ¬ μ΄λ²€νΈ μ νλ₯Ό μ€μ§ν΄μΌ νλμ§ μ¬λΆλ₯Ό μ΄ν΄ν©λλ€. κ²½μ°μ λ°λΌ μκΈ°μΉ μμ λΆμμ©μ λ°©μ§νκΈ° μν΄ μ΄λ²€νΈκ° μμ μμλ‘ λ²λΈλ§λλ κ²μ λ°©μ§ν μ μμ΅λλ€. - μ΄λ²€νΈ 리μ€λ λ‘μ§ μ΅μ ν: μ΄λ²€νΈ 리μ€λ λ‘μ§μ κ°κ²°νκ³ ν¨μ¨μ μΌλ‘ μ μ§ν©λλ€. μ±λ₯μ μν₯μ μ€ μ μμΌλ―λ‘ μ΄λ²€νΈ νΈλ€λ¬ λ΄μμ 볡μ‘νκ±°λ μκ°μ΄ λ§μ΄ 걸리λ μμ μ μννμ§ λ§μμμ€. νμν κ²½μ° λ³΅μ‘ν μμ μ λ³λμ ν¨μλ‘ μ°κΈ°νκ±°λ λλ°μ΄μ± λλ μ€λ‘νλ§κ³Ό κ°μ κΈ°μ μ μ¬μ©νμ¬ μ€ν λΉλλ₯Ό μ ννμμμ€.
- μ² μ ν ν μ€νΈ: μ΄λ²€νΈ μμ ꡬνμ΄ μμλλ‘ μλνλμ§ νμΈνκΈ° μν΄ λ€μν λΈλΌμ°μ μ μ₯μΉμμ μ² μ ν ν μ€νΈνμμμ€. νΉν λ§μ μμ μμ λλ 볡μ‘ν μ΄λ²€νΈ μ²λ¦¬ λ‘μ§μ μ²λ¦¬ν λ μ±λ₯ λ° λ©λͺ¨λ¦¬ μ¬μ©λμ μ£Όμνμμμ€.
κ³ κΈ κΈ°μ λ° κ³ λ € μ¬ν
ν₯μλ μ΄λ²€νΈ μ²λ¦¬λ₯Ό μν΄ λ°μ΄ν° μμ± μ¬μ©
λ°μ΄ν° μμ±μ HTML μμμ μ¬μ©μ μ§μ λ°μ΄ν°λ₯Ό μ μ₯νλ μ μ°ν λ°©λ²μ μ 곡ν©λλ€. μ΄λ²€νΈ νΈλ€λ¬μ μΆκ° μ 보λ₯Ό μ λ¬νκΈ° μν΄ μ΄λ²€νΈ μμκ³Ό ν¨κ» λ°μ΄ν° μμ±μ νμ©ν μ μμ΅λλ€.
<ul id="productList">
<li data-product-id="123" data-product-name="Laptop">Laptop</li>
<li data-product-id="456" data-product-name="Mouse">Mouse</li>
<li data-product-id="789" data-product-name="Keyboard">Keyboard</li>
</ul>
const productList = document.getElementById('productList');
productList.addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
const productId = event.target.dataset.productId;
const productName = event.target.dataset.productName;
console.log(`Product clicked: ID=${productId}, Name=${productName}`);
// You can now use productId and productName to perform other actions
}
});
μ΄ μμ μμ κ° li μμμλ data-product-id λ° data-product-name μμ±μ΄ μμ΅λλ€. μ΄λ²€νΈ 리μ€λλ event.target.datasetμ μ¬μ©νμ¬ μ΄λ¬ν κ°μ κ²μνμ¬ μ΄λ²€νΈ νΈλ€λ¬ λ΄μμ μ νλ³ μ 보μ μ‘μΈμ€ν μ μλλ‘ ν©λλ€.
λ€μν μ΄λ²€νΈ μ ν μ²λ¦¬
μ΄λ²€νΈ μμμ ν΄λ¦ μ΄λ²€νΈμλ§ κ΅νλμ§ μμ΅λλ€. λ§μ°μ€μ€λ², λ§μ°μ€μμ, ν€μ , ν€λ€μ΄ λ± λ€μν μ΄λ²€νΈ μ νμ μ²λ¦¬νλ λ° μ¬μ©ν μ μμ΅λλ€. λΆλͺ¨ μμμ μ μ ν μ΄λ²€νΈ 리μ€λλ₯Ό μ°κ²°νκ³ κ·Έμ λ°λΌ μ΄λ²€νΈ μ²λ¦¬ λ‘μ§μ μ‘°μ νκΈ°λ§ νλ©΄ λ©λλ€.
Shadow DOM μ²λ¦¬
Shadow DOMμΌλ‘ μμ
νλ κ²½μ° μ΄λ²€νΈ μμμ΄ λ 볡μ‘ν΄μ§ μ μμ΅λλ€. κΈ°λ³Έμ μΌλ‘ μ΄λ²€νΈλ μλ κ²½κ³λ₯Ό ν΅ν΄ λ²λΈλ§λμ§ μμ΅λλ€. Shadow DOM λ΄μμ μ΄λ²€νΈλ₯Ό μ²λ¦¬νλ €λ©΄ Shadow DOMμ λ§λ€ λ composed: true μ΅μ
μ μ¬μ©ν΄μΌ ν μ μμ΅λλ€.
const shadowHost = document.getElementById('shadowHost');
const shadowRoot = shadowHost.attachShadow({ mode: 'open', composed: true });
μ΄λ κ² νλ©΄ Shadow DOM λ΄μ μ΄λ²€νΈκ° κΈ°λ³Έ DOMμΌλ‘ λ²λΈλ§λμ΄ μμλ μ΄λ²€νΈ 리μ€λμμ μ²λ¦¬ν μ μμ΅λλ€.
μ€μ μ ν리μΌμ΄μ λ° μμ
μ΄λ²€νΈ μμμ React, Angular λ° Vue.jsμ κ°μ λ€μν μΉ κ°λ° νλ μμν¬ λ° λΌμ΄λΈλ¬λ¦¬μμ λ리 μ¬μ©λ©λλ€. μ΄λ¬ν νλ μμν¬λ μ΄λ²€νΈ μ²λ¦¬λ₯Ό μ΅μ ννκ³ μ±λ₯μ ν₯μμν€κΈ° μν΄ μ΄λ²€νΈ μμμ λ΄λΆμ μΌλ‘ μ¬μ©νλ κ²½μ°κ° λ§μ΅λλ€.
SPA(λ¨μΌ νμ΄μ§ μ ν리μΌμ΄μ )
SPAλ μ’ μ’ DOMμ λμ μΌλ‘ μ λ°μ΄νΈν©λλ€. μ΄λ²€νΈ μμμ μ΄κΈ° νμ΄μ§ λ‘λ ν DOMμ μΆκ°λ μμμ λν μ΄λ²€νΈλ₯Ό μ²λ¦¬ν μ μμΌλ―λ‘ SPAμμ νΉν μ μ©ν©λλ€. μλ₯Ό λ€μ΄ APIμμ κ°μ Έμ¨ μ ν λͺ©λ‘μ νμνλ SPAμμ μ΄λ²€νΈ μμμ μ¬μ©νμ¬ μ ν λͺ©λ‘μ΄ μ λ°μ΄νΈλ λλ§λ€ μ΄λ²€νΈ 리μ€λλ₯Ό λ€μ μ°κ²°νμ§ μκ³ λ μ ν νλͺ©μ λν ν΄λ¦μ μ²λ¦¬ν μ μμ΅λλ€.
λνν ν μ΄λΈ λ° κ·Έλ¦¬λ
λνν ν μ΄λΈκ³Ό 그리λμμλ μ’ μ’ κ°λ³ μ λλ νμμ μ΄λ²€νΈλ₯Ό μ²λ¦¬ν΄μΌ ν©λλ€. μ΄λ²€νΈ μμμ νΉν ν° λ°μ΄ν° μΈνΈλ₯Ό μ²λ¦¬ν λ μ΄λ¬ν μ΄λ²€νΈλ₯Ό μ²λ¦¬νλ ν¨μ¨μ μΈ λ°©λ²μ μ 곡ν©λλ€. μλ₯Ό λ€μ΄ μ΄λ²€νΈ μμμ μ¬μ©νμ¬ ν μ΄λΈ λλ 그리λμμ λ°μ΄ν° μ λ ¬, νν°λ§ λ° νΈμ§κ³Ό κ°μ κΈ°λ₯μ ꡬνν μ μμ΅λλ€.
λμ μμ
λμ μμμλ μ’ μ’ μ¬μ©μ μνΈ μμ©μ λ°λΌ μμ νλλ₯Ό μΆκ°νκ±°λ μ κ±°νλ μμ μ΄ ν¬ν¨λ©λλ€. μ΄λ²€νΈ μμμ μ¬μ©νμ¬ κ° νλμ μ΄λ²€νΈ 리μ€λλ₯Ό μλμΌλ‘ μ°κ²°νμ§ μκ³ λ μ΄λ¬ν μμ νλμμ μ΄λ²€νΈλ₯Ό μ²λ¦¬ν μ μμ΅λλ€. μλ₯Ό λ€μ΄ μ΄λ²€νΈ μμμ μ¬μ©νμ¬ λμ μμμμ μ ν¨μ± κ²μ¬, μλ μμ± λ° μ‘°κ±΄λΆ λ‘μ§κ³Ό κ°μ κΈ°λ₯μ ꡬνν μ μμ΅λλ€.
μ΄λ²€νΈ μμμ λν λμ
μ΄λ²€νΈ μμμ κ°λ ₯ν κΈ°μ μ΄μ§λ§ λͺ¨λ μλ리μ€μ κ°μ₯ μ ν©ν μ루μ μ μλλλ€. λ€λ₯Έ μ κ·Ό λ°©μμ΄ λ μ μ ν μ μλ μν©μ΄ μμ΅λλ€.
μ§μ μ΄λ²€νΈ λ°μΈλ©
μκ³ κ³ μ λ μμ μμκ° μκ³ μ΄λ²€νΈ μ²λ¦¬ λ‘μ§μ΄ λΉκ΅μ κ°λ¨ν κ²½μ° μ§μ μ΄λ²€νΈ λ°μΈλ©μΌλ‘ μΆ©λΆν μ μμ΅λλ€. μ§μ μ΄λ²€νΈ λ°μΈλ©μλ addEventListener()λ₯Ό μ¬μ©νμ¬ κ° μμμ μ§μ μ΄λ²€νΈ 리μ€λλ₯Ό μ°κ²°νλ κ²μ΄ ν¬ν¨λ©λλ€.
νλ μμν¬λ³ μ΄λ²€νΈ μ²λ¦¬
React, Angular λ° Vue.jsμ κ°μ μ΅μ μΉ κ°λ° νλ μμν¬λ μ체 μ΄λ²€νΈ μ²λ¦¬ λ©μ»€λμ¦μ μ 곡ν©λλ€. μ΄λ¬ν λ©μ»€λμ¦μ μ’ μ’ μ΄λ²€νΈ μμμ λ΄λΆμ μΌλ‘ ν΅ν©νκ±°λ νλ μμν¬ μν€ν μ²μ μ΅μ νλ λ체 μ κ·Ό λ°©μμ μ 곡ν©λλ€. μ΄λ¬ν νλ μμν¬ μ€ νλλ₯Ό μ¬μ©νλ κ²½μ° μ체 μ΄λ²€νΈ μμ λ‘μ§μ ꡬννλ λμ νλ μμν¬μ λ΄μ₯ μ΄λ²€νΈ μ²λ¦¬ κΈ°λ₯μ μ¬μ©νλ κ²μ΄ μ’μ΅λλ€.
κ²°λ‘
JavaScript μ΄λ²€νΈ μμμ μΉ μ ν리μΌμ΄μ μμ μ±λ₯ λ° λ©λͺ¨λ¦¬ ν¨μ¨μ±μ μ΅μ ννλ λ° μ μ©ν κΈ°μ μ λλ€. λ¨μΌ μ΄λ²€νΈ 리μ€λλ₯Ό μμ μμμ μ°κ²°νκ³ μ΄λ²€νΈ λ²λΈλ§μ νμ©νλ©΄ μ΄λ²€νΈ 리μ€λμ μλ₯Ό ν¬κ² μ€μ΄κ³ μ½λλ₯Ό κ°μνν μ μμ΅λλ€. μ΄ κ°μ΄λμμλ μ΄λ²€νΈ μμμ μ리, μ΄μ , ꡬν, λͺ¨λ² μ¬λ‘ λ° μ€μ μμ λ₯Ό ν¬ν¨νμ¬ ν¬κ΄μ μΈ κ°μλ₯Ό μ 곡νμ΅λλ€. μ΄λ¬ν κ°λ μ μ μ©νλ©΄ μ μΈκ³ μ¬μ©μμκ² λ λμ μ¬μ©μ κ²½νμ μ 곡νλ λμ± κ°λ ₯νκ³ ν¨μ¨μ μ΄λ©° μ μ§ κ΄λ¦¬νκΈ° μ¬μ΄ μΉ μ ν리μΌμ΄μ μ λ§λ€ μ μμ΅λλ€. μ΄λ¬ν κΈ°μ μ νλ‘μ νΈμ νΉμ μꡬ μ¬νμ λ§κ² μ‘°μ νκ³ μ΄ν΄νκ³ μ μ§ κ΄λ¦¬νκΈ° μ¬μ΄ κΉ¨λνκ³ μ ꡬμ±λ μ½λλ₯Ό μμ±νλ κ²μ νμ μ°μ μνμμμ€.